<template>
    <div class="info-box">
      <div class="user">
        <div class="text-box">
          <div class="title">商户信息</div>
          <div class="info">
            <span class="name">预留信息：</span>
            <span class="text" :style="{color:colorName}">YCT7-11*****DF</span>
          </div>

          <div class="info">
            <span class="name">商户简称：</span>
            <span class="text">7-11海珠鹭江店 </span>
          </div>
        </div>
        <div class="image">
          <img src="@/static/images/home-userImg.png">
        </div>
      </div>
      <div class="balance">
        <div class="title">
          充值可用余额
          <i class="el-icon-view"></i>
        </div>
        <div class="content">
          <div class="money">
            <span>￥</span>
            <span>78,256</span>
          </div>
          <div class="type">单位：元</div>
        </div>
      </div>
      <div class="info-line"></div>
      <div class="information">
        <div class="title">
          <span>系统公告</span>
          <span>查看更多</span>
        </div>

        <div class="content" v-for="(item, index) in informationList" :key="index">
          <div class="title">
            <div class="new-msg" v-if="item.isNew">最新</div>
            <span>
              {{item.title}}
            </span>
          </div>
          <span class="date">
            {{item.date}}
          </span>
        </div>
      </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    export default {
        name: "userInfo",
        data() {
            return {
                informationList: [
                    {
                        isNew: true,
                        title: '关于羊城通相关协议的升级公告',
                        date: '11-25'
                    },
                    {
                        isNew: true,
                        title: '关于羊城通相关协议的升级公告',
                        date: '11-25'
                    },
                    {
                        isNew: false,
                        title: '关于羊城通相关协议的升级公告',
                        date: '11-25'
                    },
                    {
                        isNew: false,
                        title: '关于羊城通相关协议的升级公告',
                        date: '11-25'
                    },
                    {
                        isNew: false,
                        title: '关于羊城通相关协议的升级公告',
                        date: '11-25'
                    },{
                        isNew: false,
                        title: '关于羊城通相关协议的升级公告',
                        date: '11-25'
                    },

                ]
            }
        },
        computed: {
            ...mapGetters(["colorName"])
        }
    }
</script>

<style lang="scss" scoped>
.info-box {
  border-radius: 10px;
  width: calc(100% - 20px);
  height: 811px;
  background-color: white;
  .user {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 25px;
    .text-box {
      .title {
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;
      }
      .info {
        margin-top: 5px;
        .name {
          font-size: 12px;
          font-weight: 400;
          color: #999999;
        }
        .text {
          font-size: 14px;
          font-weight: 400;
          color: #515151;
        }
      }
    }
    .image {
      img {
        width: 140px;
        height: 105px;
      }
    }
  }

  .balance {
    background-image: url("../../../static/images/home-balance.png");
    height: 80px;
    width: calc(100% - 58px);
    margin: 10px auto;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    padding: 26px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      color: white;
      font-size: 14px;
      font-weight: 400;
    }
    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      color: white;
      font-weight: 400;
      .money {
        span {
          &:first-child {
            font-size: 14px;
          }
          &:last-child {
            font-size: 32px;
          }
        }
      }
      .type {
        font-size: 14px;
      }
    }
  }

  .info-line {
    margin: 0 auto;
    width: calc(100% - 32px);
    height: 1px;
    background: #F5F7FB;
  }

  .information {
    width: calc(100% - 30px);
    margin: 15px auto;
    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      span{
        &:first-child {
          font-size: 18px;
          font-weight: 400;
          color: #333333;
        }
        &:last-child {
          font-size: 12px;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    .content {
      border-top: 1px solid #F5F7FB;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      font-size: 14px;
      font-weight: 400;

      .title {
        margin: 0;
        color: #333333;
        .new-msg {
          width: 32px;
          height: 18px;
          background: #DE7C1E;
          border-radius: 9px;
          color: white;
          font-size: 11px;
          font-weight: 400;
          text-align: center;
          line-height: 18px;
          margin-right: 5px;
        }
      }
      .date {
        margin: 0;
        color: #999999;
      }
    }
  }
}
</style>
